<template>
  <div class="preContent">
      <!--<pre>-->
        <!--<code class="lang-php" v-html="item.content"></code>-->
      <!--</pre>-->
      <pre v-show="!editContent" @dblclick="onEditContent">
        <div v-html="highlightedContent"></div>
      </pre>
    <el-input ref="contentHeight"
      v-show="editContent" type="textarea"
      v-model="item.content"
      @change="contentChanged(index)"
      :autosize="{ minRows: 20}"
      placeholder="请输入文件内容">
    </el-input>

  </div>
</template>

<script>
  import bus from '@/bus.js'

  export default {
    name: "File",
    props:["item","index"],
    data(){
      return {
        editContent:false
      }
    },
    watch: {
      "item.content": () => {
//        console.log(Prism)
        Prism.highlightAll();
      }
    },
    computed: {
      highlightedContent(){
        if(this.item.content){
          if (this.item.language) {
            var lang = this.item.language.toLowerCase();
            //plsql
            // if(this.item.language.toLowerCase()==="sql"){
            //   Prism.languages[this.item.language.toLowerCase()]="plsql";
            // }
//            console.log(Prism.languages);
            try {
              return Prism.highlight(this.item.content, Prism.languages[lang],lang);
            } catch (e) {
              console.info(e);
              return this.item.content;
            }
          } else {
            return this.item.content;
          }
        }
      }
    },
    mounted(){
//        改textarea :focus 样式
      this.$refs.contentHeight.$el.children[0].style.border="1px solid #dcdfe6"
      if(!this.item.content){
        this.editContent = true;
      }
      bus.$on("changeEditContent",()=>{
        this.editContent = false;
      });
      bus.$on("changeContent",()=>{
          if(!this.item.content){
            this.editContent = true;
          }
      });
      bus.$on("showFileDetail",()=>{
        this.editContent = false;
      });
    },
    methods: {
      onEditContent(){
        this.editContent = true;
        bus.$emit("changeSave");
      },
      contentChanged(index){
        this.editContent = true;
        this.$set(this.item, "editable", true);
        bus.$emit("onContentChanged",index);
      }
    }
  }
</script>

<style scoped>
  .preContent{
    padding: 20px;
    background-color: #fff;
    border-radius:4px 4px 0 0;
  }
</style>
